<template>
    <div class="container">
        <router-link to="/cities">
            <div class="place-search">
                <span>惠州</span>
                <div style="margin-left:5px;" class="jiantou-box">
                        <img src="../../assets/icon/jiantou.png" alt="">
                </div>
            </div>
        </router-link>
        <div>
            <van-search v-model="searchData" placeholder="请输入搜索关键词" @input="changeSearch" shape="round"></van-search>
        </div>
        <div>
            <div class="zhuji-box">
                <img src="../../assets/icon/zhuji.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { Search } from 'vant'
export default {
    name: 'vanheader',
    components: {
        VanSearch: Search
    },
    data () {
        return {
            searchData: ''
        }
    },
    methods: {
        changeSearch() {
            console.log(this.searchData);
        }
    }
}
</script>

<style lang="less" scoped>
    .container {
        // height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .place-search {
            display: flex;
        }
        /deep/ .van-search {
            background-color: transparent;
        }
        span {
            color: white;
        }
        .zhuji-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: rgba(182, 178, 178, 0.3);
            img {
                height: 25px;
                width: 25px;
            }
        }
        .jiantou-box {
            img {
                height: 20px;
                width: 20px;
            }
        }
    }
</style>